/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {Form, Row, Col, Input, Button, Select, Switch, Radio, Checkbox, message} from 'antd'
import axios from "../../../../apis/api";
const { Option } = Select
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
    },
};
const { TextArea } = Input
class DaiLi extends Component {
    state = {
        user: {},
        posts: [],
        roles: [],
        proxys: []
    }

    componentDidMount = async () => {
        const {userId} = this.props.match.params
        try {
            const userInfoResult = await axios.get(`/system/user/getBusiness/${userId}`)
            if (userInfoResult.code === 0) {
                this.setState({
                    user: userInfoResult.data.user,
                    posts: userInfoResult.data.posts,
                    roles: userInfoResult.data.roles,
                    proxys: userInfoResult.data.proxys,
                })
                this.props.form.resetFields();
            }else {
                message.error(userInfoResult.msg)
            }
        }catch (e) {
            console.log(e)
            message.error(e.message)
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const {user, posts, roles, proxys} = this.state
        return (
            <div>
                <Form {...formItemLayout} onSubmit={this.handleSearch}>
                    <Form.Item label={'用户名称'}>
                        {getFieldDecorator('userName', {
                            initialValue: user.userName || '',
                            rules: [{ required: true, message: '请输入用户名称'}],
                        })(
                            <Input placeholder='请输入用户名称' autoComplete="off" disabled={true}/>
                        )}
                    </Form.Item>
                    <Form.Item label={'手机号码'}>
                        {getFieldDecorator('phonenumber', {
                            initialValue: user.phonenumber || '',
                            rules: [{
                                required: true, message: '请输入手机号码'
                            }, {
                                validator: (rule, value, callback) => {
                                    if (/^[0-9]{11}$/.test(value)) {
                                        callback()
                                    } else {
                                        callback(new Error('请输入正确的11位手机号码'))
                                    }
                                }
                            }],
                        })(
                            <Input placeholder='请输入手机号码' autoComplete="off" disabled={true}/>
                        )}
                    </Form.Item>
                    <Form.Item label={'登录账号'}>
                        {getFieldDecorator('loginName', {
                            initialValue: user.loginName || '',
                            rules: [{ required: true, message: '请输入登录账号'}],
                        })(
                            <Input placeholder='请输入登录账号' autoComplete="off" disabled={true}/>
                        )}
                    </Form.Item>
                    <Form.Item label={'用户状态'}>
                        {getFieldDecorator('status', {
                            initialValue: user.status || '0',
                            rules: [{ required: true, message: '请选择用户状态'}],
                        })(
                            <Select disabled={true}>
                                <Option value={'0'}>ON</Option>
                                <Option value={'1'}>OFF</Option>
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'岗位'}>
                        {getFieldDecorator('postIds', {
                            initialValue: user.postIds || [],
                        })(
                            <Select mode="multiple" disabled={true}>
                                {posts.map(item => (
                                    <Option value={item.postId}>{item.postName}</Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'性别'}>
                        {getFieldDecorator('sex', {
                            initialValue: user.sex || '0',
                            rules: [{ required: true, message: '请选择性别'}],
                        })(
                            <Radio.Group disabled={true}>
                                <Radio value="0">男</Radio>
                                <Radio value="1">女</Radio>
                            </Radio.Group>
                        )}
                    </Form.Item>
                    <Form.Item label={'角色'}>
                        {getFieldDecorator('roleIds', {
                            initialValue: user.roleIds || [],
                            rules: [{ required: true, message: '请选择角色'}],
                        })(
                            <Checkbox.Group
                                options={roles.map(item => ({
                                    label: item.roleName,
                                    value: item.roleKey,
                                    disabled: false
                                }))}
                                disabled
                            />
                        )}
                    </Form.Item>
                    <Form.Item label={'备注'}>
                        {getFieldDecorator('remark', {
                            initialValue: user.remark || '',
                        })(
                            <TextArea rows={4} disabled={true}/>
                        )}
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default Form.create()(DaiLi)
